<template>
  <div class="app-container">
    <div class="form-container">
      <el-form label-width="120" :model="carTypeForm" ref="refCarTypeForm">
        <el-form-item label="车辆类型" prop="typeName">
          <el-input placeholder="请输入车型名称" v-model="carTypeForm.typeName"></el-input>
        </el-form-item>
        <el-form-item label="可配货规格" prop="length">
          <!-- <el-col :span="0.5"><span>长</span></el-col> -->
          <el-col :span="7"><el-input placeholder="长" v-model="carTypeForm.length"></el-input></el-col>
          <el-col :span="1"><span>cm</span></el-col>
          <!-- <el-col :span="1"><span>宽</span></el-col> -->
          <el-col :span="7"><el-input placeholder="宽" v-model="carTypeForm.width"></el-input></el-col>
          <el-col :span="1"><span>cm</span></el-col>
          <!-- <el-col :span="1"><span>高</span></el-col> -->
          <el-col :span="7"><el-input placeholder="高" v-model="carTypeForm.height"></el-input></el-col>
          <el-col :span="1"><span>cm</span></el-col>
        </el-form-item>
        <el-form-item label="驾照类型" prop="driverLicenseType">
          <el-checkbox-group v-model="carTypeForm.driverLicenseType as string[]">
            <el-checkbox v-for="item in driveTypeList" :key="item.id" name="driverLicenseType" :label="item.id">
              {{ item.typeName }}
            </el-checkbox>
          </el-checkbox-group>
          <span style="position: absolute; top: 20px; display: block; font-size: 12px; color: red"
            >注：不选择任何类型表示不限制驾照类型</span
          >
        </el-form-item>
        <el-form-item label="正面照片">
          <el-upload
            :class="fileList.length == 1 ? 'active' : ''"
            v-model:file-list="fileList"
            :headers="{ Authorization: `Bearer ${token}` }"
            :on-success="handleForntSucc"
            action="/manager/image/uploadImg"
            list-type="picture-card"
            :limit="1"
            :data="{ attachmentType: '3' }"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
          >
            正面照片
            <!-- <el-icon><Plus /></el-icon> -->
          </el-upload>
          <el-upload
            :class="fileListBack.length == 1 ? 'active' : ''"
            v-model:file-list="fileListBack"
            :on-success="handleBackSucc"
            :headers="{ Authorization: `Bearer ${token}` }"
            action="/manager/image/uploadImg"
            list-type="picture-card"
            :limit="1"
            :data="{ attachmentType: '3' }"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
          >
            后面照片
            <!-- <el-icon><Plus /></el-icon> -->
          </el-upload>
          <el-upload
            :class="fileListLeft.length == 1 ? 'active' : ''"
            v-model:file-list="fileListLeft"
            :on-success="handleLeftSucc"
            action="/manager/image/uploadImg"
            :headers="{ Authorization: `Bearer ${token}` }"
            list-type="picture-card"
            :limit="1"
            :data="{ attachmentType: '3' }"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
          >
            左侧照片
            <!-- <el-icon><Plus /></el-icon> -->
          </el-upload>
          <el-upload
            :class="fileListRight.length == 1 ? 'active' : ''"
            v-model:file-list="fileListRight"
            action="/manager/image/uploadImg"
            :headers="{ Authorization: `Bearer ${token}` }"
            :on-success="handleRightSucc"
            list-type="picture-card"
            :limit="1"
            :data="{ attachmentType: '3' }"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
          >
            右侧照片
            <!-- <el-icon><Plus /></el-icon> -->
          </el-upload>
        </el-form-item>
      </el-form>
    </div>

    <div class="btn-container">
      <el-button type="primary" size="default">取消</el-button>
      <el-button type="primary" size="default" @click="handleSubmit">{{ submitFlag ? "添加" : "修改" }}</el-button>
    </div>
  </div>
</template>
<script setup lang="tsx" name="addCompany">
// import { ref, reactive, onMounted } from "vue";
import { onMounted, ref } from "vue";
// import { Plus } from "@element-plus/icons-vue";
import { ElMessage, type UploadProps, type UploadUserFile } from "element-plus";
import { useRoute, useRouter } from "vue-router";
import { CarType, DrivingType } from "@/api/interface/province/carManage";
import { addCarTypeAPI, CarTypeDetailAPI, getDriveTypeListAPI, upadateCarTypeAPI } from "@/api/modules/province/carManageAPI";
const route = useRoute();
const router = useRouter();
const token = localStorage.getItem("token");
const carTypeForm = ref<CarType.Add>({
  typeName: "",
  driverLicenseType: [],
  frontalView: "string",
  backView: "string",
  leftView: "string",
  rightView: "string",
  driverLicenseTypeName: []
});
const fileList = ref<UploadUserFile[]>([]);
const handleForntSucc = res => {
  console.log(res);
  carTypeForm.value.frontalView = res.url;
};
const handleBackSucc = res => {
  carTypeForm.value.frontalView = res.url;
};
const handleLeftSucc = res => {
  carTypeForm.value.frontalView = res.url;
};
const handleRightSucc = res => {
  carTypeForm.value.frontalView = res.url;
};
const fileListBack = ref<UploadUserFile[]>([]);
const fileListLeft = ref<UploadUserFile[]>([]);
const fileListRight = ref<UploadUserFile[]>([]);
const dialogImageUrl = ref("");
const dialogVisible = ref(false);

const handleRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
};
const handlePictureCardPreview: UploadProps["onPreview"] = uploadFile => {
  dialogImageUrl.value = uploadFile.url!;
  dialogVisible.value = true;
};
const submitFlag = ref<boolean>(true);
const getDetail = async (id: string) => {
  const { data, code, msg } = await CarTypeDetailAPI(id);
  if (code == "200" && data) {
    carTypeForm.value = data;
    carTypeForm.value.driverLicenseType = (carTypeForm.value.driverLicenseType as string).split(",");
    console.log(carTypeForm.value);
  } else {
    ElMessage.error(msg);
  }
};
const addCarType = async () => {
  driveTypeList.value.forEach(item => {
    (carTypeForm.value.driverLicenseType as string[]).forEach(item2 => {
      if (item.id == item2) {
        (carTypeForm.value.driverLicenseTypeName as string[]).push(item.typeName);
      }
    });
  });
  carTypeForm.value.driverLicenseTypeName = (carTypeForm.value.driverLicenseTypeName as string[]).join(",");
  carTypeForm.value.driverLicenseType = (carTypeForm.value.driverLicenseType as string[]).join(",");
  const { msg, code } = await addCarTypeAPI(carTypeForm.value);
  if (code == "200") {
    ElMessage.success("添加成功");
    router.push({ path: "/provinceLevel/proCar/proCarType/index" });
  } else {
    ElMessage.error("添加失败" + msg);
  }
};
const updateCarType = async () => {
  driveTypeList.value.forEach(item => {
    (carTypeForm.value.driverLicenseType as string[]).forEach(item2 => {
      if (item.id == item2) {
        (carTypeForm.value.driverLicenseTypeName as string[]).push(item.typeName);
      }
    });
  });
  carTypeForm.value.driverLicenseTypeName = (carTypeForm.value.driverLicenseTypeName as string[]).join(",");
  carTypeForm.value.driverLicenseType = (carTypeForm.value.driverLicenseType as string[]).join(",");
  console.log(carTypeForm.value);
  const { msg, code } = await upadateCarTypeAPI(carTypeForm.value);
  if (code == "200") {
    ElMessage.success("更新成功");
    router.push({ path: "/provinceLevel/proCar/proCarType/index" });
  } else {
    ElMessage.error("更新失败" + msg);
  }
};
const handleSubmit = () => {
  if (submitFlag.value) {
    addCarType();
  } else {
    updateCarType();
  }
};
const driveTypeList = ref<DrivingType.Data[]>([]);
const getDriveTypeList = async () => {
  const { code, data } = await getDriveTypeListAPI();
  if (code == "200" && data) {
    driveTypeList.value = data;
    driveTypeList.value.forEach(item => {
      item.id = String(item.id);
    });
  }
};
onMounted(() => {
  getDriveTypeList();
  if (route.query.id != undefined) {
    console.log("进来了");
    getDetail(route.query.id as string);
    submitFlag.value = false;
  } else {
    submitFlag.value = true;
  }
});
</script>
<style lang="scss" scoped>
.app-container {
  padding: 10px;
  background-color: white;
  .form-container {
    box-sizing: border-box;
    width: 70%;
    padding: 10px;
    margin: 0 auto;
    .form-title {
      margin-bottom: 15px;
      margin-left: 25px;
      .title-number {
        display: inline-block;
        width: 25px;
        height: 25px;
        font-size: 13px;
        line-height: 25px;
        color: white;
        text-align: center;
        vertical-align: middle;
        background-color: #009688;
        border-radius: 50%;
      }
    }
  }
  .btn-container {
    margin-top: 20px;
    text-align: center;
  }
}
.active ::v-deep .el-upload--picture-card {
  display: none;
}
::v-deep .el-form-item__label {
  font-size: 13px;
}
::v-deep .el-col {
  padding-right: 10px;
}
</style>
